let dataList = [
    { height: 700},
    { height: 700},
    { height: 700},
    { height: 700},
    { height: 700},
]
$(function () {
    $(".main-channel .hot-phone").each((index, el) => {
        $(el).css(dataList[index]);
    })
})

//1.获取指定几个楼层的 到页面body的距离
let sectionHeights = [];
let minSectionTop = [];
let maxSectionTop = [];
$(window).on("load", function () {
    //每一个盒子的最小值
    minSectionTop = Array.from($(".hot-phone")).map((el) => parseInt($(el).offset().top))
    //每个盒子得最大值
    maxSectionTop = Array.from($(".hot-phone")).map((el) => parseInt($(el).offset().top + $(el).height()))
    // console.log(sectionHeights);
    $(window).on("scroll",_.debounce(function () {
        // console.log(1111);
        //获取不可见区域的高度
        let scrTop = $(document).scrollTop()
        //当前的最小值
        let currentIndex = -1;
        for (let i = 0; i < minSectionTop.length; i++) {
            //如果不可见区域高度的值,大于某一个盒子的最小值,并大于某个盒子的最大值  + 150, 提前到达
            if (scrTop + 150 >= minSectionTop[i] && scrTop + 150 < maxSectionTop[i]) {
                //获取当前的下标
                currentIndex = i;
                break;
            }
        }
        if (currentIndex != -1) {
            $(".fixedNav").find("li").eq(currentIndex).addClass("active").siblings().removeClass("active");
        }
    }, 200))

    $(".fixedNav li").on("click", function () {
        let $index = $(this).index();
        //   console.log(  minSectionTop[$index]);
        $("html,body").animate({ scrollTop: minSectionTop[$index] })
    })
})